一款极简聊天应用,比较完整,略好看,多端支持一应俱全!
推荐关注
责编:猿哥 | 来源:GitHub猿 整理
上次是谁要的系统项目啊,猿哥帮你找到了。
📚 项目介绍
🔥本项目系统是一款基于JS的超轻量级聊天软件。前端:vue3.0、element plus、electron、TypeScript 实现的 PC&Web版聊天程序,主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket。支持web网页聊天实现。服务端:springboot、tio、oauth2.0等技术。界面:高仿微信。扩展:接私活
说明
1、此版本是个全新开发的版本,和之前的老版本除了界面相似,别的都不一样,完全不一样。主要用vue3.0 + ts开发。消息可靠性更高,如果发送人能够看到自己发送的消息,那么对方100%可达。2、系统是在RuoYi-vue(https://gitee.com/y_project/RuoYi-Vue) 的基础上开发的,但是把数据库操作改成mybatis-plus,原先的是mybatis(如果你想完全迁移到RuoYi系统里面,可能还需要一定的工作量)。
结构
v-im-pc 是聊天客户端,支持打包成exe 和 h5网页。
v-im-server 是服务端代码,集成了ruoyi的模块。
RuoYi-ui-vue3 是ruoyi管理系统的前端代码。
doc 下面有数据库等。
1、2、3都是要启动的,务必先启动2
v-im-pc文档
安装依赖命令:yarn 。
开发环境命令:npm run serve 和 npm run electron:serve。
打包exe安装文件:npm run electron:build,打包完成的文件在/dist_electron 下。
打包web文件:npm run build,打包完成的文件在/dist 下。
启动:num run serve。
v-im-server文档
启动:直接run v-im-server 下的 VimApplication,不是ruoyi-admin下的 RuoYiApplication。
数据库配置在ruoyi-admin resources下的application-druid.yml。
RuoYi-ui-vue3文档
这里是管理后台,是若依默认的UI。
启动:num run dev。
具体功能参考ruoyi
注意事项
打包时候项目路径不能有中文,包括你 windows 用户都不能有中文字符,因为npm 缓存都是在用户目录下(如果原先的用户名是中文,再修改成英文也不好用,因为原先的npm包都还在中文目录下,可以新建个window 英文账号,登录新账号打包)。另外,搜索公众号Linux就该这样学后台回复“快速开发”,获取一份惊喜礼包。
使用yarn 安装依赖,npm 不是很好用,尝试过,都不能打包成功。如果yarn 不能安装依赖成功,可以多试几次!
基于 t-io websocket 协议, 据说能支持百万级并发,但是此项目并没有进行此方面的测试,还请知晓 !
数据库mysql,缓存redis,消息聊天记录在redis里面存着,私聊key:message-{minUserID}-{maxUserId}(两个人的id肯定是大小值不一样),群聊key:message-{groupId},表im-message暂时没有用。
如果希望实现同一账号多端登录,可以将 src/main/java/com/ruoyi/tio/TioWsMsgHandler.java 77行注释掉
系统的通知功能使用的uni-push,需要去uni-cloud后台开通通知功能,因为使用了云空间服务。
现在系统不能发送离线通知,需要在手机设置两个地方 a> 系统设置-通知与状态栏-v-im-mobile 把所有的都选中,b>电池-更多-耗电行为-找的应用-允许后台行为。
要实现离线推送需要给每个厂家进行注册开发者对接,比较麻烦。
常见问题
如果出现 Parsing error: x-invalid-end-tag vue/no-parsing-error 类似的错误,可用用 webstorm 右键src 目录 Fix eslint problems,
安装不成功,请先执行 npm install node-sass。如果还是错误请多重试下!
很多同学安装electron失败,导致不能打包,可以尝试用cnpm或者yarn安装,或者多重试几次。
历史记录分页第一页数据不对问题:第一页是带发送给对方的未读消息,所以第一页可能是超过每页的分页记录。
截图
功能点
文本聊天
聊天表情
发送图片(http)
发送文件(http)
单聊
群聊
用户分组(后端支持)
离线消息(单聊+群聊,支持消息提醒)
聊天记录(单聊、群聊)
支持心跳检测,断线重连
使用SpringBoot security oauth2.0 支持单点登录。
另外,搜索公众号顶级算法后台回复“算法”,获取一份惊喜礼包。
好友添加。(新增)
群管理(新增)
带有管理后台(原ruoyi-vue)
树状组织机构
PC端消息转发
手机语音消息
手机通知
参考项目及技术
RuoYi-vue(https://gitee.com/y_project/RuoYi-Vue)
layIM(主要是聊天表情,文件处理方面)。
使用SpringBoot、oauth2.0、t-io 开发后端服务。
vue3.0、element-plus、typescript开发前端。
界面高仿微信,如有侵权请告知。
其他:使用 fetch 发送ajax 请求,支持跨域,electron 支持打包成为exe,也支持linux 和 mac 目前还没测试,有条件的同学可以测试。
交流授权
最后,想学习这个项目的可以查看项目地址:
项目源码,怎么领取?
扫码下方二维码,后台回复【聊天应用】即可获取所有系统
在 GitHub猿 还有更多优质项目系统学习资源,欢迎分享给其他同学吧!
猿哥个人微信
添加猿哥个人微信即送一份惊喜大礼包
→ 技术资料共享
→ 技术交流社群
最近,GitHub猿建了一个「GitHub猿交流群」,欢迎大家一起交流优秀开源项目,也可以宣传自己的开源项目,在 「GitHub猿」公众号后台回复【加群】邀请你入群。